<template>
  <div>
    <div style="margin-top:10px;margin-left:20px;margin-bottom:5px;float:left;">
        <el-button size="small" id="add-btn" plain icon="el-icon-plus" type="primary" @click="openSaveDialog('add')">添加一级菜单</el-button>
    </div>
    <div style="margin-left:20px;margin-right:20px;">
        <el-table id="data-table" :data="menuVOList" style="width: 100%" border :highlight-current-row="true" stripe>
           <el-table-column type="expand" width="30px">
              <template slot-scope="props">
                  <el-form label-position="left" inline class="table-expand">
                    <!-- <el-form-item label="邮箱："><span>{{props.row.email}}</span> </el-form-item> -->
                     <el-table  :data="props.row.subMenuList" style="width: 100%" border :highlight-current-row="true" stripe>
                          <el-table-column prop="id" label="id" align="center"></el-table-column>
                            <el-table-column prop="pid" label="父id" align="center"></el-table-column>
                            <el-table-column prop="name" label="名称" align="center"></el-table-column>
                            <el-table-column prop="url" label="路由" align="center"></el-table-column>
                            <el-table-column prop="sort" label="排序" align="center"></el-table-column>
                            <el-table-column prop="icon" label="图标" align="center"></el-table-column>
                            <el-table-column prop="description" label="描述" align="center"></el-table-column>
                            <el-table-column prop="createTime" label="创建时间" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.createTime | datefmt('YYYY-MM-DD HH:mm:ss') }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="updateTime" label="修改时间" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.updateTime | datefmt('YYYY-MM-DD HH:mm:ss') }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120px" align="center">
                                <template slot-scope="scope">
                                 <el-tooltip  effect="dark" content="编辑" placement="bottom-end">
                                    <el-button size="small" plain  class="el-icon-edit"  type="primary" @click="openSaveDialog('editSub',scope.row,props.row.name)"></el-button>
                                 </el-tooltip>
                                 <el-tooltip  effect="dark" content="删除" placement="bottom-end">
                                    <el-button size="small" plain  icon="el-icon-delete" type="danger" v-on:click="del(scope.row.id)"></el-button>
                                 </el-tooltip>
                                </template>
                            </el-table-column>
                     </el-table>
                  </el-form>
              </template>
            </el-table-column>
            <el-table-column prop="id" label="id" align="center"></el-table-column>
            <el-table-column prop="pid" label="父id" align="center"></el-table-column>
            <el-table-column prop="name" label="名称" align="center"></el-table-column>
            <el-table-column prop="url" label="路由" align="center"></el-table-column>
            <el-table-column prop="sort" label="排序" align="center"></el-table-column>
            <el-table-column prop="icon" label="图标" align="center"></el-table-column>
            <el-table-column prop="description" label="描述" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" width="160">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime | datefmt('YYYY-MM-DD HH:mm:ss') }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="修改时间" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.updateTime | datefmt('YYYY-MM-DD HH:mm:ss') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180px" align="center">
                 <template slot-scope="scope">
                    <el-tooltip  effect="dark" content="编辑" placement="bottom-end">
                        <el-button size="small" plain  class="el-icon-edit"  type="primary" @click="openSaveDialog('edit',scope.row)"></el-button>
                    </el-tooltip>
                    <el-tooltip  effect="dark" content="添加子菜单" placement="bottom-end">
                        <el-button size="small" plain  icon="el-icon-plus" type="primary" v-on:click="openSaveDialog('addSub',scope.row)"></el-button>
                    </el-tooltip>
                    <el-tooltip  effect="dark" content="删除" placement="bottom-end">
                        <el-button size="small" plain  icon="el-icon-delete" type="danger" v-on:click="del(scope.row.id)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
    </div>

       <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="dialogFormVisible" :center="true" v-el-drag-dialog @dragDialog="handleDrag">
        <el-form :model="saveMenuForm">
          <el-form-item v-if="saveMenuForm.id" label="id：" label-width="120px">
            <span style="width:20%;">&nbsp;</span>
            <span>{{saveMenuForm.id}}</span>
          </el-form-item>
          <el-form-item v-if="saveMenuForm.pid" label="父菜单：" label-width="120px">
            <span style="width:20%;">&nbsp;</span>
            <span>{{saveMenuForm.pname}}</span>
          </el-form-item>
          <el-form-item label="名称：" label-width="120px" required>
             <span style="color:red;width:20%;">&nbsp;</span>
             <el-input  style="width:80%;" v-model="saveMenuForm.name" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="路由：" label-width="120px">
            <span style="width:20%;">&nbsp;</span>
            <el-input style="width:80%;" v-model="saveMenuForm.url" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="排序：" label-width="120px">
            <span style="width:20%;">&nbsp;</span>
            <el-input-number :min="1" style="width:80%;" v-model="saveMenuForm.sort" autocomplete="off" clearable></el-input-number>
          </el-form-item>
          <el-form-item label="图标：" label-width="120px">
            <span style="width:20%;">&nbsp;</span>
            <el-input style="width:80%;" v-model="saveMenuForm.icon" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="描述：" label-width="120px">
            <span style="width:20%;">&nbsp;</span>
            <el-input style="width:80%;" v-model="saveMenuForm.description" autocomplete="off" clearable></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" plain class="el-icon-close" type="info" @click="dialogFormVisible = false">取 消</el-button>
          <el-button size="small" plain class="el-icon-check" type="primary" @click="saveData">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui

export default {
  name: 'elDragDialog',
  directives: { elDragDialog },
  data () {
    return {
        menuVOList: [{
            id: null,
            pid: null,
            name: '',
            description: '',
            createTime: '',
            updateTime: '',
            url: '',
            sort: 0,
            icon: '',
            subMenuList: []
        }],
        searchForm: {
            text: ''
        },
        dialogTitle: '',
        dialogFormVisible: false,
        saveMenuForm: {
            id: null,
            pid: null,
            name: '',
            description: '',
            url: '',
            sort: 1,
            icon: '',
            pname: '' // 只用于显示,后端保存实体类并不封装
        },
    }
  },
  methods: {
      handleDrag() {
      },
      loadData () {
          let vm = this
          vm.$http.post('api/menu/find',vm.searchForm).then(res => {
            if (res.data.code === 0){
              vm.menuVOList = res.data.data
            }
            else {
              vm.$message.error(res.data.msg)
            }
          })
      },
      del (id) {
        let vm = this
        vm.$confirm('确认彻底删除该数据吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            vm.$http.get('api/menu/delete/' + id).then(res => {
                if (res.data.code === 0){
                    vm.$message.success('删除成功')
                    vm.loadData()
                }
                else {
                vm.$message.error(res.data.msg)
                }
            })
        }).catch(errMsg => {
        })
      },
      resetForm () {
        let vm = this
        vm.saveMenuForm = {
            id: null,
            pid: null,
            name: '',
            description: '',
            url: '',
            sort: 1,
            icon: '',
            pname: '' // 只用于显示,后端保存实体类并不封装
        }
      },
      findDetail (id,pname) {
        let vm = this
        vm.$http.get('api/menu/findOne/' + id).then(res => {
            if (res.data.code === 0){
             vm.saveMenuForm = res.data.data
             if (pname !== null) {
                vm.saveMenuForm.pname = pname
             }
            }
            else {
             vm.$message.error(res.data.msg)
            }
        })
      },
      openSaveDialog (opt,row,pname) {
        let vm = this
        vm.resetForm()
        if('edit' === opt) {
           vm.dialogTitle = '修改一级菜单'
           vm.findDetail(row.id)
           vm.dialogFormVisible = true
        }
        else if ('add' === opt) {
            vm.dialogTitle = '添加一级菜单'
            vm.dialogFormVisible = true
        }
        else if ('addSub' === opt) {
            vm.dialogTitle = '添加子菜单'
            vm.saveMenuForm.pid = row.id
            vm.saveMenuForm.pname = row.name
            vm.dialogFormVisible = true
        }
        else if('editSub' === opt) {
           vm.dialogTitle = '修改子菜单'
           vm.findDetail(row.id,pname)
           vm.dialogFormVisible = true
        }
      },
      saveData () {
          let vm = this
          // 添加
          if (vm.saveMenuForm.id === null) {
            let msg = '添加一级菜单成功'
            if (vm.saveMenuForm.pid !== null) {
                msg = '添加子菜单成功'
            }
            vm.$http.post('api/menu/add',vm.saveMenuForm).then(res => {
                if (res.data.code === 0){
                    vm.$message({
                        message: msg,
                        type: 'success'
                    })
                    vm.dialogFormVisible = false
                    vm.loadData()
                }
                else {
                    vm.$message.error(res.data.msg)
                }
            })
          }
          else {
            vm.$http.post('api/menu/update',vm.saveMenuForm).then(res => {
                if (res.data.code === 0){
                    vm.$message({
                        message: '修改菜单成功',
                        type: 'success'
                    })
                    vm.dialogFormVisible = false
                    vm.loadData()
                }
                else {
                    vm.$message.error(res.data.msg)
                }
            })
          }
      }
  },
  mounted() {
    let vm = this
    vm.loadData()
  }
}
</script>
